<template>
    <div class="student_card" :class="{disabled:disabled}">
      <el-card shadow="hover" class="box-card">
        <div slot="header">
         
          <el-row type="flex" justify="space-between">
            <el-col :md="12" :lg="14" :offset="5">
              <h3 class="title">{{machine.room}}</h3>
            </el-col>
            <el-col :md="7" :lg="5">
              <el-button type="text" @click="connect">远程连接</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="body">
          <div class="info">
            <span style="color: Sienna">任课教师:{{machine.teacher}}</span>
            <el-tag :type="machine.status | statusFilter(0)"
                    style="float: right;">
                    {{machine.status}}
            </el-tag>
          </div>
          <el-row :gutter="1">
            <el-col :sm="12" :md="14" :lg="16">
              <img src="~@/assets/img/thumb/win10_3.png"/>
            </el-col>

            <el-col :sm="12" :md="10" :lg="8">
              <div class="right-panel ">
                <el-button type="text" @click="dialogVisible = true">详细信息</el-button>
                <el-button  :loading="loading"
                            :type="machine.status | statusFilter(2)" 
                            size="mini"
                            @click="powerSwitch(machine.status)">
                            {{machine.status | statusFilter(1)}}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      
      <el-dialog
        title="详细信息"
        :visible.sync="dialogVisible"
        width="400px">
        
        <el-form
          size="small"
          label-position="right" 
          label-width="70px" 
          class="data-form">
          <el-form-item label="班级">
            <el-input v-model="machine.cid" readonly/>
          </el-form-item>
          <el-form-item label="IP地址">
            <el-input v-model="machine.ip" readonly/>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="machine.username" readonly/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="visiblePsw" show-password/>
          </el-form-item>
          <el-form-item label="系统镜像">
            <el-input v-model="machine.imgName" readonly/>
          </el-form-item>
       
          <el-form-item label="截止时间">
            <el-date-picker v-model="machine.endTime" type="date" readonly/>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="machine.profile" 
                      readonly
                      :autosize="{ minRows: 4, maxRows: 8}" 
                      type="textarea"/>
          </el-form-item>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </el-dialog>
    </div>
    
    
</template>

<script>
import { updateMachine } from '@/api/machine'
export default {
  name: 'RoomItem',
  props:{
    machine:{
      type: Object,
      value: {}
    },
  },
  data() {
    return {
      query: {
        mid:null,
        status: null,
      },
      loading: false,
      disabled: false,
      dialogVisible: false,
    }
  },
  filters: {
    statusFilter(status, index) {
      const statusMap = {
        '运行中': ['success','关机', 'danger',],
        '已关机': ['info', '开机', 'success',],
        '挂起': ['warning', '开机', 'success',]
      }
      return statusMap[status][index]
    },
  },
  computed:{
    visiblePsw:{
      get(){
        return this.machine.password
      },
      set(){},
    },
  },
  created(){
    // console.log(this.machine)
  },
  methods: {
    powerSwitch(status){
      this.loading = true
      
      this.query.mid = this.machine.mid
      if(status == '运行中') this.query.status = '已关机'
      else this.query.status = '运行中'

      updateMachine(this.query).then(response=>{
        this.machine.status = response.load
        this.$message({
          message: '操作成功 ',
          type: 'success'
        })
        this.loading = false
      }).catch(()=>{
        this.loading = false
        console.log("student,操作失败")
      })
      
    },
    
    connect(){
      if(this.machine.status != '运行中'){
        this.$message({
          message: '该机器处于非运行状态',
          type: 'error'
        })
        return false
      }
      this.$store.dispatch('room/activeVM', this.machine.mid).then(()=>{
        this.$router.replace(`/VNC/index`)
      })
    },
  }
}
</script>

<style lang="scss">
.student_card{
  .el-card{
    background-color: floralwhite;
    .el-card__header{
      padding: 9px 10px 0px;
      border-bottom-color: #B4EEB4;
    }
    .el-card__body {
      padding: 10px;
    }
  }
}
</style>
<style lang="scss">
.student_card.disabled{
  pointer-events: none;
}
.student_card{
  margin-bottom: 32px;
  .box-card {
    .title{
      margin-top: 0px;
      margin-bottom: 0px;
      text-align: center;
      color: tomato;
    }
    .body{
      .info{
        margin-bottom: 8px;
      }
      img{
        width: 100%;  
        border-radius: 5px;
      }
      .right-panel{
        // border: 1px solid red;
        position:absolute;
        bottom:0px;right:0px;
        
        display: flex;
        flex-direction: column;
        justify-content:space-between;
        text-align: center;
      }
    }
  }
  .data-form{
    width: 90%;
  }
}
</style>
